<template>
  <div class="notebookWrapper">
    <div class="notebookWrapper-container">
      <ul class="notebookWrapper-sidebar clearfix">
        <li class="font-14" v-for="tab in tabList" :key="tab.name"
          :class="sideBarVisible && (activeSidebar === tab.name) && 'active'" @click="changeActiveTab(tab)">
          {{ tab.label }}
          <!-- <i :class="tab.icon" class="prefixIcon22"></i> -->
        </li>
      </ul>
      <NotebookContainer ref="notebookContainer" />
    </div>
  </div>
  <!-- <div class="notebookWrapper">
    <ul class="notebookWrapper-sidebar">
      <li class="font-16" v-for="tab in tabList" :key="tab.name"
        :class="sideBarVisible && (activeSidebar === tab.name) && 'active'" @click="changeActiveTab(tab)">
        <i :class="tab.icon" class="prefixIcon22"></i>
      </li>
    </ul>
    <div class="notebookWrapper-container">
      <NotebookContainer ref="notebookContainer" />
    </div>
  </div> -->
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import NotebookContainer from './Wrapper'
import { Vue, Component, Watch } from 'vue-property-decorator'

@Component({
  components: {
    NotebookContainer,
  },
  computed: {
    ...mapState({
      activeNotebook: state => state.notebook.activeNotebook,
      activeSidebar: state => state.notebook.activeSidebar,
      sideBarVisible: state => state.notebook.showSideBar,
      isRunningAll: state => state.notebook.isRunningAll
    })
  },
  methods: {
    ...mapMutations({
      changeActiveSidebar: 'CHANGE_ACTIVE_SIDEBAR',
      changeSideBarVisible: 'CHANGE_SIDE_BAR_VISIBLE',
      changeRunningAll: 'CHANGE_RUN_ALL',
      changeShowProgress: 'CHANGE_SHOW_PROGRESS'
    })
  },
  beforeRouteLeave(to, from, next) {
    if (this.isRunningAll) {
      this.$confirm(this.$t('notebook.leaveRunAll'), this.$t('tip'), {
        // confirmButtonText: title,
        cancelButtonText: this.$t('cancel'),
        type: 'warning',
        customClass: 'centerButton'
      }).then(() => {
        this.changeRunningAll(false)
        this.changeShowProgress(false)
        next()
      })
    } else {
      next()
    }
  }
})

export default class Notebook extends Vue {
  activeName = 'notebook'
  @Watch('activeNotebook')
  onTypeChange(newVal) {
    this.changeActiveSidebar(newVal?.type ?? 'notebook')
  }

  mounted() {
    this.changeActiveSidebar(this.activeNotebook ? this.activeNotebook.type : 'notebook')
  }

  get tabList() {
    const list = [
      { name: 'notebook', label: '工作目录', icon: 'el-ksd-icon-hierarchy_16' },
      // { name: 'catalog', icon: 'el-ksd-icon-data_base_16' },
      { name: 'workflow', label: '工作流', icon: 'el-ksd-icon-workflow_16' }
    ]
    return list
  }

  changeActiveTab(tab) {
    if (!this.sideBarVisible) {
      this.changeSideBarVisible(true)
    }
    this.changeActiveSidebar(tab.name)
  }
}
</script>
<style lang="scss" scoped>
.notebookWrapper {
  width: 100%;
  height: 100%;
  // height: calc(100vh - $page-header-height - $page-breadcrumb-height - 10px);
  // background-color: $--background-color-secondary;

  &-sidebar {
    // width: 32px;
    // height: 100%;
    // border-right: 1px solid $--border-color-light;
    // float: left;
    // padding-top: 10px;
    // padding-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: $--color-nav;
    margin-bottom: 5px;
    color: $--mian-color;
    width: 210px;
    border-bottom: 1px solid $--line-border-color;

    li {
      width: 100px;
      float: left;
      text-align: center;
      height: 35px;
      line-height: 35px;
      cursor: pointer;


      &.active {
        // border: 1px solid $--border-color-light;
        // border-right: 1px solid $--background-color-secondary;
        // border-left: 2px solid $--color-primary;
        // position: relative;

        border-bottom: 2px solid $--menu-active-color;
        color: $--menu-active-color;

        // &:after {
        //   content: '';
        //   display: block;
        //   width: 1px;
        //   height: 46px;
        //   background-color: $--background-color-secondary;
        //   position: absolute;
        //   right: -2px;
        //   top: 0;
        // }
      }
    }
  }

  &-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
}
</style>